<template>
  <!-- 第一层：假象的屏幕层 -->
  <div class="screen-layer">
    <!-- 第二层：缩放层，用于控制大屏内容的缩放以适应 -->
    <div class="scale-layer" :style="computeScale">
      <!-- 第三层：大屏层，根据真实尺寸来布局 -->
      <div ref="screen-layout" :style="computeSize" class="screen-layout">
      </div>
    </div>
  </div>
</template>

<script>
import debounce from "lodash/debounce";

/**
 * 可视化前台布局 demo
 */
export default {
  name: "Screen01",
  data() {
    return {
      // 尺寸一般都用 1920 * 1080，因为 UI 在设计 PC 网页或者数据大屏的时候一般都喜欢选这个尺寸。
      width: 1920,
      height: 1080,
      scale: "scale(1)",
    };
  },
  computed: {
    computeScale() {
      return {
        transform: this.scale,
      };
    },
    computeSize() {
      return {
        width: this.width + "px",
        height: this.height + "px",
      };
    },
  },
  mounted() {
    this.requestScreenData();
  },
  methods: {
    /**
     * 请求大屏数据
     */
    requestScreenData() {
      // this.$post('', {
      // id: this.$route.params.id
      // }).then(res => {
      // this.screenData = res;
      this.watchResize();
      // });
    },

    /**
     * 监听窗口变化
     */
    watchResize() {
      // 初始加载页面时设置一次缩放比例
      this.calcScale();
      // 当窗口大小有变化时
      window.addEventListener(
        "resize",
        debounce(() => {
          this.calcScale();
        }, 150)
      );
    },

    /**
     * 计算缩放比例
     */
    calcScale() {
      const scale = {
        x: window.innerWidth / this.width,
        y: window.innerHeight / this.height,
      };
      this.scale = `scale(${scale.x}, ${scale.y})`;
    },
  },
};
</script>

<style scoped>
/* 屏幕层的大小可以有多种设置方式，这里用 absolute 相对简单，还能自适应浏览器的调整 */
.screen-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.scale-layer {
  transform-origin: left top;
}
.screen-layout {
  background: url(../assets/canvas_bg.jpeg) center center / 100% 100% no-repeat;
}
</style>